<template>
  <view class="user-profile-container" v-if="isLogged">
	  <!-- 导航 -->
    <view class="header-section" >
      <view class="avatar-container">
        <image class="avatar" :src="info.avatar"></image>
      </view>
      <view class="user-info">
        <view class="username">{{info.username}}</view>
        <view class="user-id">{{info.id}}</view>
      </view>
    </view>
	<!-- 中间 -->
    <view class="function-section">
      <view class="function-item">
        <!-- 这里可以添加图标元素 -->
        <text class="function-text" @click="address">我的地址</text>
      </view>
      <view class="function-item">
        <!-- 这里可以添加图标元素 -->
        <text class="function-text" @click="attention">我的关注</text>
      </view>
      <view class="function-item">
        <!-- 这里可以添加图标元素 -->
        <text class="function-text" @click="order">我的订单</text>
      </view>
    </view>
	<!-- 下部 -->
    <button class="logout-button" @click="outlogin">退出登录</button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import  {onShow} from '@dcloudio/uni-app';
const isLogged = ref(true);
const info = ref({});
const attention=()=>{
	uni.navigateTo({
		url:"/pages/attention/index"
	})
}
onShow(() => {
let content = uni.getStorageSync("content");
let token = uni.getStorageSync("token");
  if (token) {
  try {
    info.value = JSON.parse(content);
  } catch (error) {
    isLogged.value = false;
  }
} else {
	uni.navigateTo({
		url:"/pages/login/index"
	})
  isLogged.value = false;
}
})

// 封装页面跳转函数
const navigateToLogin = () => {
  uni.redirectTo({
    url: "/pages/login/index",
    success: () => {
      console.log('页面跳转成功');
    },
    fail: (err) => {
      console.error('页面跳转失败', err);
    }
  });
};

const outlogin = () => {
  isLogged.value = false;
  navigateToLogin();
  uni.removeStorageSync("token");
  uni.removeStorageSync("content");
  uni.removeStorageSync("address");
};

const address=()=>{
	uni.navigateTo({
		url:"/pages/address/index"
	})
}
const order=()=>{
	uni.switchTab({
		url:"/pages/order/index"
	})
}
</script>
<style scoped>
.user-profile-container {
  background-color: #f8f9fa;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}
.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  background: linear-gradient(to bottom right, #42a5f5, #1976d2);
  color: white;
}

.avatar-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
}

.avatar {
  width: 100%;
  height: 100%;
}

.user-info {
  text-align: center;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-id {
  font-size: 16px;
  color: #e0e0e0;
}

.function-section {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}

.function-item {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.function-icon {
  width: 30px;
  height: 30px;
  margin-right: 15px;
}

.function-text {
  font-size: 18px;
  color: #333;
}

.logout-button {
  width: 80%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
.gologin{
  width: 400px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  font-size: 18px;
  cursor: pointer;
  margin-top: 50vh;
}
</style>

